<template>
    <drop-wrap :data="data" :index="index"  :element="element">
      <draggable
        v-model="element.columns"
        :no-transition-on-drag="true"
        v-bind="{
          group: 'site',
          ghostClass: 'ghost',
          animation: 200,
          handle: '.mover',
        }"
        @add="handleContainerAdd($event)"
      >
        <transition-group
          name="fade"
          tag="div"
          :class="[
            model == 'design' ? 'submeter-container' : '',
            element.options.className ? element.options.className : '',
          ]"
        >
          <widget
            v-for="(el, i) in element.columns"
            :element="el"
            :index="i"
            :key="el.key || Math.random() * 5"
            :data.sync="element.columns"
          ></widget>
        </transition-group>
      </draggable>
    </drop-wrap>
</template>

<script>
import clone from 'clone'
import Draggable from 'vuedraggable'
export default {
  inject: ['model'],
  props: ['element', 'data', 'index'],
  data() {
    return {}
  },
  computed: {
    store() {
      return this.element.getRoot();
    },
  },
  components: { Draggable },
  methods: {
    handleContainerAdd(evt) {
      console.log('add', evt)
      console.log('end', evt)
      const newIndex = evt.newIndex
      const to = evt.to
      console.log(to)

      console.log('需要删除的key', this.element.columns[newIndex].key)
      if (this.element.columns[newIndex].key) {
        this.store.delComponentMap(this.element.columns[newIndex])
      }
      this.$set(
        this.element.columns,
        newIndex,
        this.store.generateComponent({
          ...clone(this.element.columns[newIndex]),
        })
      )
      this.store.current = this.element.columns[newIndex]
      this.$handleStack.push(clone(this.store.root))
    },
  },
}
</script>

<style lang="scss" scoped>
.submeter-container {
  min-height: 120px;
  border: 1px solid purple;
  position: relative;
  padding-top: 18px;
}
.submeter-container::before {
  position: absolute;
  content: '分表容器';
  font-size: 13px;
  line-height: 16px;
  width: 60px;
  left: 95%;
  top: 0px;
  transform: translateX(-28px) translateY(3px);
  color: purple;
}
</style>
